<template>
  <!-- 数字趋势图 -->
  <div class="show-module">
    <slot></slot>
    <div class="show-module-hd drag-tongs">
      <div class="title">
        <router-link :to="'/make/' + id" v-if="place === 'dashboard'">{{ title }}</router-link>
        <template v-else>{{ title }}</template>
      </div>
      <a-tooltip v-if="describe">
        <template #title>{{ describe }}</template>
        <InfoCircleOutlined class="describe" />
      </a-tooltip>
    </div>
    <div class="show-module-centent">
      <div class="trend-num-style">
        {{ getTotal() }}
      </div>
      <div class="trend-chart" :id="id"></div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  import { globalConfig, field } from './common/pubConfig';
  import { Area } from '@antv/g2plot';
  import mixin from './common/mixin';
  import { transformData } from '@/constants/initDefaultData';
  import { InfoCircleOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    components: { InfoCircleOutlined },
    mixins: [mixin],
    props: {},

    data() {
      return {};
    },

    created() {},

    methods: {
      /**
       * 渲染图表
       */

      $render() {
        this.chartObj = new Area(this.id, {
          ...globalConfig(),
          ...field(),
          data: transformData(this.showData),
          padding: [0, -25, 0, -25],
          appendPadding: 0,
          smooth: true,
          legend: false,
          xAxis: false,
          yAxis: false,
          areaStyle: {
            fill: 'l(270) 0:#ffffff 1:#1890ff',
          },
          line: {
            size: 1,
          },
        });
        this.chartObj.render();
      },

      getTotal() {
        return this.showData.list[0].value.reduce((prev, curr) => {
          return prev + curr;
        });
      },
    },
  });
</script>
<style lang="scss">
  .show-module-centent {
    .trend-num-style {
      font-size: 22px;
      height: 50px;
      display: inline-block;
      padding-top: 15px;
    }
    .trend-chart {
      height: calc(100% - 50px);
    }
  }
</style>
